﻿<script type="text/javascript">
    function fillExecutionData(routineExecutionId) {      
        $.ajax({
            url: '@Url.Action("IndexJson", "RoutineExecutionHistory")?showErrors=true&routineExecutionId=' + routineExecutionId,
            dataType: 'json',
            success: function (doc) {
                $("#executionHistory")[0].innerHTML = doc.html;
                generateMemoryUsageChart(doc);                
            }
        });
    }

    function generateMemoryUsageChart(json) {
        var chart = new Highcharts.Chart({
            chart: { renderTo: 'memoryUsageChart', className: 'chart', defaultSeriesType: 'line', marginBottom: 25, marginRight: 130 },
            legend: { align: 'right', borderWidth: 0, layout: 'vertical', verticalAlign: 'top', x: -10, y: 100 },
            subtitle: { text: json.period },
            title: { text: 'RAM Usage', x: -20 },
            tooltip: { formatter: function () { return '<b>' + this.x + ' seconds after start</b><br/>' + this.y + ' kb'; } },
            //xAxis: { categories: json.categories },
            xAxis: { categories: [''] },
            yAxis: { plotLines: [{ color: '#808080', value: 0, width: 1}], title: { text: 'Total Memory Usage (kb)'} },
            credits: { enabled: false }
        });

        $.each(json.series, function (itemNo, item) {
            chart.addSeries({
                name: item.Name,
                data: item.Data
            }, false);
        });

        chart.redraw();
    }
</script>

<div id="executionHistory">
</div>
<div id="executionError">
</div>
<div id="memoryUsageChart">
</div>
